<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>Blog - Content Manager</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/base.css" />
  </head>

  <body>
    <!-- 头部 -->
    <div class="header">
      <!-- 网站标志 -->
      <div class="logo fl">
        <div class="logo fl">人人都是博主 <i>BLOGGER</i></div>
      </div>
      <!-- /网站标志 -->
      <!-- 用户信息 -->
      <div class="info">
        <div class="profile dropdown fr">
          <span class="btn dropdown-toggle" data-toggle="dropdown">
            admin
            <span class="caret"></span>
          </span>
          <ul class="dropdown-menu">
            <li><a href="user-edit.html">个人资料</a></li>
            <li><a href="#">退出登录</a></li>
          </ul>
        </div>
      </div>
      <!-- /用户信息 -->
    </div>
    <!-- /头部 -->
    <!-- 主体内容 -->
    <div class="content">
      <!-- 侧边栏 -->
      <div class="aside fl">
        <ul class="menu list-unstyled">
          <li>
            <a class="item active" href="user.html">
              <span class="glyphicon glyphicon-user"></span>
              用户管理
            </a>
          </li>
          <li>
            <a class="item" href="article.html">
              <span class="glyphicon glyphicon-th-list"></span>
              文章管理
            </a>
          </li>
        </ul>
        <div class="cprt">
          Powered by
          <a href="http://www.iiilab.com/" target="_blank">人人都是博主</a>
        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="main">
        <!-- 分类标题 -->
        <div class="title">
          <h4>文章</h4>
          <span>找到1篇文章</span>
          <a href="article-edit.html" class="btn btn-primary new">发布新文章</a>
        </div>
        <!-- /分类标题 -->
        <!-- 内容列表 -->
        <table
          class="table table-striped table-bordered table-hover custom-table"
        >
          <thead>
            <tr>
              <th>ID</th>
              <th>标题</th>
              <th>发布时间</th>
              <th>作者</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>5b9a716cb2d2bf17706bcc0a</td>
              <td>JavaScript基础一：基本介绍</td>
              <td>2020-12-23</td>
              <td>黑马讲师</td>
              <td>
                <a
                  href="article-edit.html"
                  class="glyphicon glyphicon-edit"
                ></a>
                <i
                  class="glyphicon glyphicon-remove"
                  data-toggle="modal"
                  data-target=".confirm-modal"
                ></i>
              </td>
            </tr>
            <tr>
              <td>5b9a716cb2d2bf17706bcc0a</td>
              <td>JavaScript基础二：代码书写位置</td>
              <td>2020-12-24</td>
              <td>黑马讲师</td>
              <td>
                <a
                  href="article-edit.html"
                  class="glyphicon glyphicon-edit"
                ></a>
                <i
                  class="glyphicon glyphicon-remove"
                  data-toggle="modal"
                  data-target=".confirm-modal"
                ></i>
              </td>
            </tr>
            <tr>
              <td>5b9a716cb2d2bf17706bcc0a</td>
              <td>JavaScript基础三：代码注释</td>
              <td>2020-12-25</td>
              <td>黑马讲师</td>
              <td>
                <a
                  href="article-edit.html"
                  class="glyphicon glyphicon-edit"
                ></a>
                <i
                  class="glyphicon glyphicon-remove"
                  data-toggle="modal"
                  data-target=".confirm-modal"
                ></i>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /内容列表 -->
        <!-- 分页 -->
        <ul class="pagination">
          <li>
            <a href="#">
              <span>&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#">
              <span>&raquo;</span>
            </a>
          </li>
        </ul>
        <!-- /分页 -->
      </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    <div class="modal fade confirm-modal">
      <div class="modal-dialog modal-lg">
        <form class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
            <h4 class="modal-title">请确认</h4>
          </div>
          <div class="modal-body">
            <p>您确定要删除这篇文章吗?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <input type="submit" class="btn btn-primary" />
          </div>
        </form>
      </div>
    </div>
    <!-- /删除确认弹出框 -->
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
